<template>
    <div class="container">
        <div class="card">
            <el-breadcrumb separator="/" class="card-body">
                <el-breadcrumb-item :to="{ path: '/AdminHome' }"><i class="el-icon-location"></i>首页</el-breadcrumb-item>
                <el-breadcrumb-item :to="{ path: '/ProcessList' }">查看全部流程</el-breadcrumb-item>
                <el-breadcrumb-item>{{ this.$route.meta.title }}</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="card" v-if="this.$route.query.id">
            <div class="card-header">流程详情</div>
            <div class="card-body">
              <div class="process-title"><h2>涉密信息系统电脑及网络维修申请</h2></div>
              <div class="process-info">
                <p><label class="t-right">申请人:</label><span>张三</span></p>
                <p><label class="t-right">所属部门:</label><span>成都分公司 人事部</span></p>
                <p><label class="t-right">申请时间:</label><span>2019-03-26</span></p>
                <p><label class="t-right">工号:</label><span>00035</span></p>
                <p><label class="t-right">联系方式:</label><span>15003242342</span></p>
                <p><label class="t-right">资产编号:</label><span>ZC-28368</span></p>
                <p><label class="t-right">故障描述:</label><span>软件卡死 蓝屏 系统偶尔崩溃</span></p>
              </div>
              <div class="item-in-asstes">
                <el-table :data="tableData" style="width: 100%">
                    <el-table-column prop="name" label="资产名称">
                    </el-table-column>
                    <el-table-column prop="date" label="资产编号" width="180">
                    </el-table-column>
                    <el-table-column prop="IPaddress" label="IP地址">
                    </el-table-column>
                    <el-table-column prop="MACaddress" label="MAC地址">
                    </el-table-column>
                    <el-table-column prop="amount" label="数量" width="180">
                    </el-table-column>
                </el-table>
              </div>
              <el-form ref="form" :model="form" label-width="130px">
                  <div class="pro-form" style="margin-top:20px;">
                      <el-form-item label="维护人员姓名">
                          <el-input v-model="form.name" placeholder="请输入姓名"></el-input>
                      </el-form-item>
                      <el-form-item label="维护费用">
                          <el-input v-model="form.name" placeholder="无维修费用无需填写"></el-input>
                      </el-form-item>
                      <el-form-item label="维护人员联系方式">
                          <el-input v-model="form.name" placeholder="请输入联系方式"></el-input>
                      </el-form-item>
                      <el-form-item label="处理或维护过程">
                          <el-input type="textarea" v-model="form.desc" placeholder="请填写处理过程"></el-input>
                      </el-form-item>
                      <el-form-item label="处理人员报告结果">
                          <el-input type="textarea" v-model="form.desc" placeholder="请填写报告结果"></el-input>
                      </el-form-item>
                  </div>

                  <hr>
                  <div class="pro-form t-center">
                      <el-form-item>
                          <el-button type="primary" @click="onSubmit">立即保存</el-button>
                      </el-form-item>
                  </div>
              </el-form>
            </div>
        </div>
        <div class="card color-danger data-none" v-else>页面无参数: 暂无法获取数据!</div>
    </div>
</template>

<script>
export default {
  name: "ProcessDetail",
  data() {
    return {
      tableData: [
        {
          date: "2016-05-02",
          name: "JAVA开发用台式机",
          MACaddress: "00-01-6C-06-A6-29",
          IPaddress: "218.6.161.10",
          amount:1
        },
        {
          date: "2016-05-04",
          name: "JAVA开发用台式机",
          MACaddress: "00-01-6C-06-A6-29",
          IPaddress: "218.6.161.10",
          amount:1
        },
        {
          date: "2016-05-01",
          name: "JAVA开发用台式机",
          MACaddress: "00-01-6C-06-A6-29",
          IPaddress: "218.6.161.10",
          amount:1
        },
        {
          date: "2016-05-03",
          name: "JAVA开发用台式机",
          MACaddress: "00-01-6C-06-A6-29",
          IPaddress: "218.6.161.10",
          amount:1
        }
      ],
      form: {
        name: "",
        desc: ""
      }
    };
  },
  mounted() {
    if (this.$route.query.id) {
      //请求数据
    } else {
      this.$message.error("ERROR! 缺少参数!");
    }
  }
};
</script>

<style lang="less" scoped>
.data-none {
  padding: 50px;
  text-align: center;
  font-size: 22px;
}
.item-in-asstes {
  padding-top: 1rem;
}
.process-title {
  h2 {
    font-size: 22px;
    color: #333;
  }
  text-align: center;
  padding-top: 20px;
  padding-bottom: 20px;
}

.process-info {
  label {
    width: 120px;
    text-align: right;
    font-weight: bold;
  }
  label,
  span {
    width: 50%;
    display: inline-block;
  }
  span {
    text-indent: 20px;
  }
}
.pro-form {
  width: 480px;
  margin-left: auto;
  margin-right: auto;
}
</style>